function openTinginfo(model, tingnum) {
	Ext.Viewport.setMasked({
		xtype: 'loadmask',
    	indicator: true
	});
	var kind = "tinginfo";
	Ext.data.JsonP.request({
		url: 'http://itscreater.cafe24.com/Triends/Counting.jsp',
		params:{
			num: tingnum,
			kind: kind
		},
		callbackKey: 'callback',
		success: function(result) {
		}
	})
	
	var activetab = Ext.getCmp('main').getActiveItem().id;

	var tinginfoStore = Ext.getStore('tinginfoStore'+tingnum);
	if (Ext.typeOf(tinginfoStore) == 'object') {
		tinginfoStore.removeAll();
		tinginfoStore.setData(model.data);
	} else {
		tinginfoStore = Ext.create("Ext.data.Store",{
			model: 'Triends.Tinginfo'});
		tinginfoStore.setStoreId('tinginfoStore'+tingnum);
		tinginfoStore.setData(model.data);
	}
	
	var AttendeeStore = Ext.getStore('AttendeeStore'+tingnum);
	if (Ext.typeOf(AttendeeStore) == 'object') {
		AttendeeStore.removeAll();
	} else {
		AttendeeStore = Ext.create("Ext.data.Store",{
			model: 'Triends.Model.AttendeeList'});
		AttendeeStore.setStoreId('AttendeeStore'+tingnum);
	}
	
	var TingCommentStore = Ext.getStore('TingCommentStore'+tingnum);
	if (Ext.typeOf(TingCommentStore) == 'object') {
		TingCommentStore.removeAll();
	} else {
		TingCommentStore = Ext.create("Ext.data.Store",{
			model: "Triends.Model.TingComment",
			sorters: [
		{
			property: 'Date',
			direction: 'ASC'
		},
		{
			property: 'Time',
			direction: 'ASC'
		}
	]});
		TingCommentStore.setStoreId('TingCommentStore'+tingnum);	
	}
	
	
	Triends.app.getHistory().add(Ext.create('Ext.app.Action', {
		    					url: 'tinginfo/' + activetab + '/' + tingnum
		    				}));
	
    Ext.Viewport.setMasked(false);
}

function otherinfo() {
	var otherid = Ext.getCmp("tinghostpanel").getData().ID;
	var cacaocheck;
	if (Ext.getCmp('tingjoinbtn').isHidden() == false) {
  		cacaocheck = 'cannot';
 	} else {
 		cacaocheck = 'can';
	}
	openOtherinfo(otherid, cacaocheck);
}

Ext.define("Triends.Model.TingHost",{
	extend: "Ext.data.Model",
	config: {
		idProperty: "ID",
		fields: [
			"ID", "Name", "Email", "Age", "Gender", "Introduction", "Cacao" , "UserTheme", "Distance", "Time", "Theme", "Total", "Wifi"
		]
	}
});
var TingHostStore = Ext.create("Ext.data.Store",{
	model: "Triends.Model.TingHost",
	id: 'TingHostStore'
});


Ext.define("Triends.Tinginfo",{
	extend: "Ext.data.Model",
	config: {
		fields: ["NUMBER", "ID", "HOST", "TITLE", "THEME", "LAT", "LNG", "CONTENT", "STARTDATE", "STARTTIME", "DATE", "TIME", "Distance", "Time", "ThemeScore", "Total", "Wifi"]
	}
});




Ext.define('Triends.view.Tinginfo', {
 	extend: 'Ext.Panel',
 	xtype: 'tinginfo',
 	id: 'tinginfo',
 	alias: 'tingpage',
 	config: {
 		fullscreen: true,
 		scrollable: true,
 		layout: 'vbox',
 		style: 'background:white',
 		listeners: {
 			deactivate: function(oldActiveItem, container, newActiveItem, eOpts) {
					Ext.getCmp('tinginfo').destroy();
				}
 		},
 		items: [{
 			xtype: 'titlebar',
 			id: 'tinginfotitle',
 			hidden: true,
 			ui: 'light',
 			docked: 'top',
 			items: [
						{
								xtype: 'button',
								iconCls: 'trash',
								align: 'right',
								iconMask: true,
								hidden: true,
								width: '48px',
								height: '32px',
								id: 'tingdeletebtn',
								handler: function() {
									navigator.notification.confirm(
										'Ting을 삭제하시겠습니까?',
										msgFunction,
										'알림',
										'OK, Cancel'
									)
									
									function msgFunction(buttonIndex){
										if (buttonIndex == 1) {
												Ext.Viewport.setMasked({
													xtype: 'loadmask',
								    				indicator: true
												});
					       						var userstoredata = Ext.getStore('UserStore').getAt(0).data;
									       		var userid = userstoredata.ID;
					       						
					       						var thisview = Ext.getCmp('tinghostpanel');
							    				var num = thisview.getData().NUMBER;
					
					    	  					Ext.data.JsonP.request({
					   								url: 'http://itscreater.cafe24.com/Triends/TingDelete.jsp',
					   								params: {
					   									num : num
					   								},
					          						callbackKey: 'callback',
					          						success: function(result) {
					          							
					          							var tingStore = Ext.getStore('tingstore');
					          							tingStore.removeAll();
					         							tingStore.loadPage(1, {
					         								callback: function() {
					         									var tingrecord = userHOSTtingStore.findRecord('NUMBER', num);
					          									userHOSTtingStore.remove(tingrecord);
																			Triends.app.getHistory().add(Ext.create('Ext.app.Action', {
								    											url: 'mainpage'
																			}));
																			Ext.Viewport.setMasked(false);
																			navigator.notification.confirm(
																				'Ting이 삭제되었습니다.',
																				function(){
																					
																				},
																				'알림',
																				'OK'
																			)
					         								}
					         							});
													}
					    		  				});	
					       					} else if (buttonIndex == 2) {
					       						Ext.emptyFn;
					       					}
									}
								}
						},
						{
							xtype: 'button',
							iconCls: 'settings',
							align: 'right',
							iconMask: true,
							width: '48px',
							height: '32px',
							hidden: true,
							id: 'tingmodifybtn',
							handler: function(){
								var activetab = Ext.getCmp('main').getActiveItem().id;
								Triends.app.getHistory().add(Ext.create('Ext.app.Action', {
	            					url: 'tingmodify/'+ activetab
	        					}));
							}
					}]
 		},
 		{
 			xtype: 'panel',
 			layout: 'hbox',
 			minHeight: 90,
 			style: 'padding:15px; border-bottom:1px #CBCAC7 solid',
// 			style: {'background': '-webkit-gradient(linear, left top, left bottom, from(#FEFCFC), to(#BEBBBB))', 'padding':'15px'},
			items:[
				{	
					xtype: 'panel',
					width: 60,
					items: [{
						xtype: 'image',
						id: 'tinginfotheme',
						width: 48,
						height: 48,
						centered: true
					}]
				},
				{
					xtype: 'panel',
					maxWidth: '80%',
					id: 'tingtitlepanel',
					style: 'word-break:break-all; margin-left:10px; padding-right:15px',
					tpl: [
						"<p style='margin-left:10px'><font size='5'><b>{TITLE}</b></font></p>"
					]
				}
			]
		},
		{
			xtype: 'panel',
			layout: 'vbox',
			style: 'padding:15px;',
			items: [
				{
					xtype: 'panel',
					layout: 'hbox',
					width: '100%',
					items: [{
						xtype: 'panel',
						items:[{
							xtype: 'button',
							iconCls: 'maps',
							iconMask: true,
							style: 'margin-left:5px; background: -webkit-gradient(linear, left top, left bottom, from(#FEFCFC), to(#E9E8E8))',
							height: 48,
							width: 48,
							handler: function(btn) {
								var tingnum = Ext.getCmp("tinghostpanel").getData().NUMBER;
				 				var lat2 = Ext.getStore('tinginfoStore'+tingnum).getAt(0).data.LAT;
				 				var lng2 = Ext.getStore('tinginfoStore'+tingnum).getAt(0).data.LNG;
				 				
				 				var latlng = new google.maps.LatLng(lat2, lng2);
				 				var map3 = Ext.create("Ext.Map",{
									id: "map3",
									width:300,
									mapOptions: {
										center: latlng,
										zoom: 14,
										zoomControl: true,
										mapTypeId: google.maps.MapTypeId.ROADMAP,
										mapTypeControl: false,
										streetViewControl: false
									},
									listeners: {
										maprender: function(comp, map){
											var marker = new google.maps.Marker({
												map: map,
												position: latlng,
												icon: 'resource/images/mappin1.png'
											});
										}
									}
								});
				
				 				var mapOverlay2 = Ext.create("Triends.view.MapOverlay2");
				 				mapOverlay2.add(map3);
				 				Ext.Viewport.add(mapOverlay2);
	 						}
						}]	
					},
					{
						xtype: 'panel',
						id: 'addresspanel',
						width: '85%',
						style: 'padding-left:20px; font-size:15px;'
					}]
				},
				{
						xtype: 'panel',
						layout: 'hbox',
						style: 'margin-top: 20px', 
						items:[{	
							xtype: 'panel',
							id: 'tingtimepanel',
							flex:1,
							style: 'padding-top: 6px; padding-right:10px'
						},
						{
							xtype: 'panel',
							id: 'tifipanel',
							style: 'margin-left:10px',
							layout: 'hbox',
							flex:1,
							listeners:{
								tap: {
									element: 'element',
									fn: function() {
										var record = this.getData();
										
										var Tdetail = Ext.create('Triends.view.Tfidetail2');
										var Tfidistance = Ext.getCmp('Tfidistance2');
										var Tfitime = Ext.getCmp('Tfitime2');
										var Tfitheme = Ext.getCmp('Tfitheme2');
										var distance = record.Distance.split(".")[0];
								    	var time = record.Time.split(".")[0];
								    	if (time.match("-") != null){
								    		time = time.replace("-", "");
								    		if (time < 60){
									    		Tfitime.setHtml("<font size='5'>"+time+"</font>분")
									    	}else if(time > 60 && time < 1440){
									    		time = time/60;
									    		time = Math.round(time);
									    		Tfitime.setHtml("<font size='5'>"+time+"</font>시간")
									    	}else if(time > 1440){
									    		time = time/1440;
									    		time = Math.round(time);
									    		Tfitime.setHtml("<font size='5'>"+time+"</font>일")
									    	}
								    	} else{
								    		Tfitime.setHtml("모임시간이 지났습니다")
								    	}
								    	var theme = record.THEME;
								    	Tfidistance.setData({Distance: distance});
								    	Tfitheme.setHtml('<img src="resource/images/'+theme+'.png">');
								    	Ext.Viewport.add(Tdetail);
									}
								}
							},
							items: [{
								xtype: 'panel',
								layout: 'vbox',
								style: 'padding-left:30px;',
								items: [{
									xtype: 'panel',
									width: '40px',
									height: '40px',
									id: 'tinginfotfipicture'
								},
								{
									xtype: 'panel',
									style: 'text-align:center; margin-top:-5px',
									html: 'T-fi'
								}]
							},
							{
								xtype: 'panel',
								style: 'text-align:center;padding-top:18px',
								id: 'tinginfotfipanel',
								flex: 1
							}]
						}]
					},
					{
						xtype: 'panel',
						layout: 'hbox',
						style: 'margin-top:20px;background:#F5F4F1',
						height: 45,
						width: '100%',
						hidden: true,
						id: 'joinpanel',
						items:[{
							xtype: 'panel',
							style: 'text-align:center; padding-top:10px',
							flex: 1.3
//							html: '<font size="2">You have not joined</font>'
						},
						{
							xtype: 'panel',
							flex: 1,
							items: [{
									xtype: 'button',
						 			text: 'Join',
						 			id: 'tingjoinbtn',
						 			style: 'margin-top:8px',
						 			iconCls: 'arrow_right',
						 			iconMask: true,
						 			hidden: true,
						 			height: 30,
						 			width: 80,
						 			ui: 'small',
						 			docked: 'right',
						 			handler: function() {
						 				navigator.notification.confirm(
											'Ting에 참가하시겠습니까?',
											msgFunction,
											'알림',
											'OK, Cancel'
										)
						 				function msgFunction(buttonIndex){
						 					if (buttonIndex == 1) {
					       						Ext.Viewport.setMasked({
													xtype: 'loadmask',
													indicator: true
												});
					       						var userstoredata = Ext.getStore('UserStore').getAt(0).data;
					       						var userid = userstoredata.ID;
					       						var username = userstoredata.Name;
					       						var usercacao = userstoredata.Cacao; 
					       						
					       						// 현재 팅 페이지의 번호를 받음
					 							var thisview = Ext.getCmp('tingtitlepanel');
							    				var tingnum = thisview.getData().NUMBER;
							    				var hostid = thisview.getData().ID;
							    				var hostname = thisview.getData().HOST;
							    				
							    				var userdata = Ext.getStore('UserStore').getAt(0);
								          		userdata.set("Total", 100);
								          		userdata.set("Wifi", "3");
								          		
					          					var AttendeeStore = Ext.getStore('AttendeeStore'+tingnum);
					          					AttendeeStore.add(userdata);
		          								var attendeelistpanel = Ext.getCmp('attendeelistpanel');
		          								attendeelistpanel.refresh();
		          								
		         								var tingjoinbtn = Ext.getCmp("tingjoinbtn");
		        									tingjoinbtn.setHidden(true);
		        								var tingjcancelbtn = Ext.getCmp("tingjoincancelbtn");
					        						tingjcancelbtn.setHidden(false);
					        						Ext.getCmp('joinpanel').items.items[0].setHtml('<font size="2">You have joined</font>');
					        					
					        					var userATTENDtingStore = Ext.getStore('userATTENDtingstore');
					        					var tingdata = Ext.getCmp("tingtitlepanel").getData();
					        					
					        					var date = tingdata.DATE.split(' ')[0];
												var hour = tingdata.DATE.split(' ')[1].substr(0,2);
												var minute = tingdata.DATE.split(' ')[1].substr(2);
												var ampm;
												if(hour >= 12){
													hour = hour-12;
													ampm = "PM"
												} else{
													ampm = "AM"
												}
												var finaldate = date+" "+ampm+" "+hour+""+minute;
												tingdata.AMPMDATE = finaldate;
					        					
					        					userATTENDtingStore.add(tingdata);
					        					
					        					Ext.Viewport.setMasked(false);
							    				
										    	Ext.data.JsonP.request({
					   								url: 'http://itscreater.cafe24.com/Triends/TingJoin.jsp',
					   								params: {
					   									userid: userid,
					   									username: username,
					   									usercacao: usercacao,
					   									num : tingnum,
					   									hostid: hostid,
					   									hostname: hostname
					   								},
					          						callbackKey: 'callback',
					          						success: function(result) {
								          				if (result.success == 'true') {
								          				
								          				} else if (result.success == 'false') {
								          					navigator.notification.confirm(
																'이미 참여한 Ting입니다',
																function(){},
																'알림',
																'확인'
															)
								          				}
					         						}
					    		  				});	
					       					} else if (buttonIndex == 2) {
					       						Ext.emptyFn;
					       					}
						 				}
						 				
									}
							},
							{
								xtype: 'button',
					 			text: 'Join Cancel',
					 			id: 'tingjoincancelbtn',
					 			iconCls: 'arrow_left',
					 			style: 'margin-top:8px',
					 			height: 30,
					 			width: 130,
					 			iconMask: true,
					 			ui: 'small',
					 			docked: 'right',
					 			hidden: true,												 			
					 			handler: function() {
					 				navigator.notification.confirm(
										'Ting참가를 취소하시겠습니까?',
										msgFunction,
										'알림',
										'OK, Cancel'
									)
					 				function msgFunction(buttonIndex){
					 					if (buttonIndex == 1) {
				       						Ext.Viewport.setMasked({
												xtype: 'loadmask',
												indicator: true
											});

				       						var userstoredata = Ext.getStore('UserStore').getAt(0).data;
				       						var userid = userstoredata.ID;
				       						var username = userstoredata.Name;
				       						// 현재 팅 페이지의 번호를 받음
				 							var thisview = Ext.getCmp('tingtitlepanel');
						    				var tingnum = thisview.getData().NUMBER;
						    				var hostid = thisview.getData().ID;
						    				var hostname = thisview.getData().HOST;
						    				
						    				var AttendeeStore = Ext.getStore('AttendeeStore'+tingnum);
							          				
					          				var userdata = AttendeeStore.findRecord('ID', userid);
					          				AttendeeStore.remove(userdata);
		          							var attendeelistpanel = Ext.getCmp('attendeelistpanel');
		          							attendeelistpanel.refresh();
		          							
		         							var userATTENDtingStore = Ext.getStore('userATTENDtingstore');
		         							userATTENDtingStore.remove(userATTENDtingStore.findRecord('NUMBER', tingnum));
					          				
					          				var tingjoinbtn = Ext.getCmp("tingjoinbtn");
		        							var tingjcancelbtn = Ext.getCmp("tingjoincancelbtn");
		        							tingjcancelbtn.setHidden(true);
		        							tingjoinbtn.setHidden(false);
		        							
		        							Ext.getCmp('joinpanel').items.items[0].setHtml('<font size="2">You have not joined</font>');
		        							
		        							Ext.Viewport.setMasked(false);
		        							
									    	Ext.data.JsonP.request({
				   								url: 'http://itscreater.cafe24.com/Triends/TingJoinCancel.jsp',
				   								params: {
				   									userid: userid,
				   									username: username,
				   									num : tingnum,
				   									hostid: hostid,
				   									hostname: hostname
				   								},
				          						callbackKey: 'callback',
				          						success: function(result) {

				          						}
				    		  				});	
				    		  				
				    		  				
				       					} else if (buttonIndex == 2) {
				       						Ext.emptyFn;
				       					}
					 				}
								}
							}]
						}]
				},
				{
					xtype: 'panel',
					id: 'tinghostpanel',
					style: 'padding-top:10px; margin-top:20px;background:white; border-top:1px #CBCAC7 solid',
					width: '100%',
					layout: 'vbox',
					items:[{
							xtype: 'panel',
							html: "<p style='margin-left:5px'><font size='4'><b>Host</b></font></p>"
						},
						{
							xtype: 'panel',
							layout: 'hbox',
							width: '100%',
							style: 'margin-top:20px',
							items: [
							{
								xtype: 'list',
								id: 'hostpanel',
								width: '100%',
								pressedCls: "x-item-selected1",
								selectedCls: "",
								pressedDelay: 50,
								scrollable: false,
								store: TingHostStore,
								itemTpl:
								"<table width='100%'>"+
									"<tr>" +
										"<td rowspan='2' align='center' valign='center' width=50 style='word-break:break-all;'><img src='https://graph.facebook.com/{ID}/picture' width='48px' height='48px'></td>" +
										"<td valign='center' style='padding-left:20px'><font size='4'>{Name}</font></td>" +
										"<td width=50 style='margin-bottom:-10px'><img src='resource/images/wifi{Wifi}.png' width='40px' height='40px'></td>"+
										"<td rowspan='2' align='center' width=50>{Total}%</td>"+
									 "</tr>" +
									"<tr>" +
										"<td></td>" +
										"<td align='center' width=50 style='padding-top:-10px'>T-fi</td>"+
									"</tr>"+
								"</table>",
								listeners: {
									itemtap: function(){
										otherinfo();
									}
								}
							}
						]}
					]
			}]
		},
		{
			xtype: 'panel',
			layout: 'vbox',
			width: '100%',
			style: 'padding:15px; border-top: 1px #CBCAC7 solid',
			items: [
 				{
 	 				xtype: 'panel',
 	 				id: 'tingcontentpanel2',
 	 				layout: 'hbox',
 	 				width: '100%',
 	 				items: [
	 	 			{
						xtype: 'button',
						id: 'expandbutton',
						style: 'background: transparent; border-color: transparent; margin-top:-5px',
						docked: 'right',
						iconCls: 'arrow_down',
						iconMask: true,
						handler: function(){
							var expandbutton = Ext.getCmp('expandbutton'); 
							var collapsebutton = Ext.getCmp('collapsebutton');
							var tingcontentpanel = Ext.getCmp('tingcontentpanel');
							expandbutton.setHidden(true);
							collapsebutton.setHidden(false);
							tingcontentpanel.setHtml("<font size='3'>"+tingcontentpanel.getData().CONTENT+"</font>");
						}
					},
					{
						xtype: 'button',
						id: 'collapsebutton',
						style: 'background: transparent; border-color: transparent; margin-top:-5px',
						hidden: true,
						docked: 'right',
						iconCls: 'arrow_up',
						iconMask: true,
						handler: function(){
							var expandbutton = Ext.getCmp('expandbutton');
							var collapsebutton = Ext.getCmp('collapsebutton');
							var tingcontentpanel = Ext.getCmp('tingcontentpanel');
							var tingcontentpanel2 = Ext.getCmp('tingcontentpanel2');
							collapsebutton.setHidden(true);
							expandbutton.setHidden(false);
							tingcontentpanel.setHtml("<font size='3'>"+tingcontentpanel2.getData()+"</font>");
						}
					}]
 	 			},
 	 			{
 	 				xtype: 'panel',
 	 				id: 'tingcontentpanel',
 	 				width: '100%',
 	 				cls: 'contentellipsis'
 	 			}]
		},
		{
			xtype: 'attendeelist'
		},
 	 	{
 	 		xtype: 'panel',
 	 		style: 'padding-top:15px; padding-left:15px;border-top:1px #CBCAC7 solid;',
 	 		items:[
 	 			{
 	 				xtype: 'panel',
 	 				style: 'margin-bottom:-10px',
 	 				html: "<p style='margin-left:5px;'><font size='4'><b>Comment</b></font></p>"
 	 			},
 	 			{
 	 				xtype: 'tingcomment'
 	 		}]
 	 	}]
 	}
 });
	 
 Ext.define('Triends.view.Tfidetail2', {
	extend: 'Ext.Panel',
	xtype: 'Tfidetail2',
	id: 'Tfidetail2',
	config: {
    	modal: true,
    	top: '10%',
    	left: '50%',
    	layout: 'vbox',
    	style: 'margin-left:-150px',
		hideOnMaskTap: true,
		width: 300,
		height: 350,
		listeners: {
			hide: function() {
				this.destroy();
			}
		},
    	items: [{
    		xtype: 'titlebar',
    		docked: 'top',
    		title: '<div class="title"><font size="3">T-fi 구성요소</font></div>'
    	},
    	{
    		xtype: 'panel',
    		style: 'padding:10px',
    		layout: 'vbox',
    		items: [{
    			xtype: 'panel',
    			html: '<font size="3"><b>거리</b></font>'
    		},
    		{
    			xtype: 'panel',
    			id: 'Tfidistance2',
    			width: '100%',
    			style: 'margin-top:10px;text-align:center',
    			tpl: "<font size='5'>{Distance}</font> km"
    		},
    		{
    			xtype: 'panel',
    			style: 'margin-top:30px',
    			html: '<font size="3"><b>모임까지 남은 시간</b></font>'
    		},
    		{
    			xtype: 'panel',
    			id: 'Tfitime2',
    			width: '100%',
    			style: 'margin-top:10px;text-align:center'
    		},
    		{
    			xtype: 'panel',
    			style: 'margin-top:30px',
    			html: '<font size="3"><b>Theme</b></font>'
    		},
    		{
    			xtype: 'panel',
    			width: '100%',
    			items:[{
    				xtype: 'panel',
		    		style: 'left:50%; margin-left:-24px',
	    			id: 'Tfitheme2',
	    			width: 48
    			}]
    		}]
    	}]
	}
});